import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import PropTypes from 'prop-types'
import _isEmpty from 'lodash/isEmpty'
import './index.scss'
import { AtRate } from 'taro-ui'

class StepItem extends Component {
	static propTypes = {
		data: PropTypes.object,
		active: PropTypes.bool, 	// 是否当前
		border: PropTypes.bool		// 开始step 无border
	}

	static defaultProps = {
		active: false,
		border: true
	}

	render(){
		const { data, payState, active, border } = this.props

		return(
			<View className={`log-step ${active ? 'log-step-active': ''}`} style={{borderWidth: `${border?'1PX' : '0'}`, borderColor: `${active ? '#FFA17D' :'#E3E5E7'}`, paddingBottom: `${border? 30 : 0}` }}>
				<View className='step-top'>
					<View className={`step-icon`}></View>
					<View className='step-title'>{data.name}</View>
				</View>
				<View className='step-time'>{data.time}</View>
				{data.logType === 'confrim' && <AtRate className='rate-num' size={24} margin={10} value={data.orderRateNumber}/>}
				<View className='step-text'>{data.desc}</View>
				{!_isEmpty(data.imgs) && <View className='step-imgs'>
					{ data.imgs.map((gl ,i)=> (<Image key={'order-img-'+i} src={gl} onClick={this.showOrderLogImg.bind(this. i)}/>))}
				</View>}
				{/* { data.orderAddedMoney > 0 && <View className='step-title-2'>额外费用描述</View> }
				{data.logType === 'processes' && <View className='step-text'>{data.logDescribe}</View>}
				{ data.orderAddedMoney > 0 && <View className='step-title-2'>需要额外支付<View className='step-money'>{data.orderAddedMoney}</View>元，是否同意？</View> }
				{data.orderAddedMoneyTime && <View className='step-title-1'>
					<View className='step-time'>{data.orderAddedMoneyTime}</View>
					<View className={`step-pay ${payState?'pay-success' :''}`}>{data.orderAddedMoneyDesc}</View>
				</View>} */}
			</View>
		)
	}

	showOrderLogImg = (index) => {
		const { data } = this.props
		Taro.previewImage({ urls: data.logImages, current: data.logImages[index]})
	}
}

export default StepItem